<template>
  <div class="absolute size16" style="right:0;top:-45px">
    <el-button
      class="mrr8"
      round
      icon="el-icon-download"
      :title="exportLoading ? '正在导出,请稍后' : '导出'"
      :disabled="exportLoading"
      v-loading="exportLoading"
      @click="selectionShow ? chooseFilter() : dowLoad()"
    ></el-button>
    <el-popover placement="bottom" width="230" trigger="click">
      <div class="lh28 checkBox">
        <el-checkbox
          class="border-bottom-info"
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0;"></div>
        <div style="max-height:500px;overflow:auto">
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              class="block"
              v-for="item in columns"
              :label="item.field"
              :key="item.field"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <el-button
        slot="reference"
        round
        icon="el-icon-setting"
        title="列设置"
      ></el-button>
    </el-popover>
    <el-dialog
      :close-on-click-modal="false"
      width="400px"
      :visible.sync="dcDialog"
      v-loading="exportLoading"
      v-dialogDrag
      custom-class="widget-dialog widget-form widget-search center no-margin "
      title="导出数据 "
    >
      <div class="text-center pdtb30">
        <el-button type="primary" @click="dowLoad(true)"
          >导出勾选数据</el-button
        >
        <el-button type="primary" @click="dowLoad()">导出全部数据</el-button>
      </div>
      <template slot="footer">
        <el-button size="mini" @click="dcDialog = false">返回</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { durationTime } from "@/utils/date";
import table2excel from "js-table2excel";
export default {
  data() {
    return {
      checkAll: true,
      checkedCities: [],
      isIndeterminate: false,
      exportLoading: false,
      dcDialog: false
    };
  },
  props: {
    listRule: {
      //控制列表列的显示
      default: [],
      type: Array
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    alllHead: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**
     * @name 导出查询数据的api
     */
    exportApi: {
      type: Function,
      default: () => {
        return () => {};
      }
    },
    /**
     *@name 导出数据查询的条件
     */
    searchData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    /**
     * @name 导出名称
     */
    excelName: {
      type: String,
      default: ""
    },
    /**
     * @name 当有中文格式数据
     */
    convertList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**
     * @name 是否存在勾选框
     */
    selectionShow: {
      type: Boolean,
      default: false
    },
    /**
     * @name 勾选的列表
     */
    chooseList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**
     * @name 列表唯一的条件字段
     */
    chooseField: {
      type: String,
      default: "orderId"
    }
  },
  computed: {
    showColumns() {
      if (!this.columns.length) return [];
      let params = [];
      this.columns.forEach(e => {
        params.push(e.field);
      });
      return params;
    },
    titleInfoList() {
      return this.listRule.map(e => {
        return {
          title: e.title,
          key: e.field,
          type: e.type == "image" ? "image" : "text"
        };
      });
    },
    routerName() {
      return this.$route?.meta?.title || "列表.xlsx";
    }
  },
  watch: {
    alllHead(n) {
      this.checkedCities = this.alllHead;
      this.handleCheckedCitiesChange(this.alllHead);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.checkedCities = this.alllHead;
      this.handleCheckedCitiesChange(this.alllHead);
    });
  },
  methods: {
    /**
     * @name 导出
     */
    async dowLoad(isSelect) {
      if (isSelect && !this.chooseList?.length) {
        this.$message("请先勾选所需数据!");
        return false;
      }
      this.exportLoading = true;

      let { data } = await this.exportApi(this.searchData);
      let listData = data?.list || data;
      if (isSelect) {
        listData = Object.assign([], this.chooseList);
      }
      let column = [...this.titleInfoList].filter(e =>
        this.checkedCities.includes(e.key)
      );
      listData.forEach(e => {
        //过滤掉null和undefined字段
        Object.keys(e).forEach(el => {
          if (
            (!e[el] && typeof e[el] == "object") ||
            typeof e[el] == "undefined"
          ) {
            e[el] = "无";
          } else if (typeof e[el] === "number") {
            if (e[el] > 100000) {
              e[el] = "＇" + e[el].toString(); //数字过大
            }
          }
        });

        if (e?.chaoshiTimeStamp) {
          e.chaoshiTime = durationTime(new Date(), e.chaoshiTimeStamp);
        }
        this.convertList.forEach(el => {
          if (Reflect.has(e, el.field)) {
            e[el.field] = el.options.find(i => i.value === e[el.field])?.label;
          }
        });
      });
      if (!listData.length) {
        this.$message("当前数据为空!");
        this.exportLoading = false;
        return false;
      }
      this.$nextTick(() => {
        table2excel(
          column,
          listData,
          this.excelName ? this.excelName : this.routerName + ".xlsx"
        );
        this.exportLoading = false;
        this.dcDialog = false;
      });
      //   this.$emit("exportData", this.checkedCities);
    },
    /**
     * @name 导出勾选
     */
    chooseFilter() {
      this.dcDialog = true;
    },
    /**
     * @name 全选
     */
    handleCheckAllChange(val) {
      let checked = this.columns.map(item => {
        return item.field;
      });
      this.checkedCities = val ? checked : [];
      this.isIndeterminate = false;
      this.$emit("showHead", this.checkedCities);
      this.$emit("doLayout");
    },
    /**
     * @name 选择操作
     */
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.columns.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.columns.length;
      this.$emit("showHead", this.checkedCities);
      this.$emit("doLayout");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-button.is-round {
  padding: 10px !important;
}
.el-checkbox:hover {
  background: #b0bed9;
}
.checkBox {
  .el-checkbox {
    margin-right: 0;
    padding-left: 8px;
  }
}
</style>
